<template>
   <!-- 1. 获取仓库的数据 -->
   <h1>{{$store.state.username}}</h1>
    <!-- 2. 调用 commit 立即修改  -->
    <button @click="$store.commit('setUserName','呼啦')">点击立刻改名</button>
    <button @click="btn">点击立刻改名</button>
    <hr>
     <!-- 3. 调用 dispatch 异步操作成功后修改 -->
     <button @click="$store.dispatch('setUserNameSync')">点击请求成功后，改名（异步）</button>
     <button @click="btnSync">点击请求成功后，改名（异步）</button>
</template>

<script>
import { useStore } from 'vuex'
export default {
  setup () {
    // 🔔 Vuex 也为组合API提供了一个 useStore 函数，用于访问仓库的
    const store = useStore()
    // console.log(store)
    // 1. 获取仓库的数据
    console.log('从仓库中取出来的用户名', store.state.username)
    // 2. 调用 commit 立即修改
    const btn = () => {
      store.commit('setUserName', '呼啦呼啦')
    }
    const btnSync = () => {
      store.dispatch('setUserNameSync')
    }
    return { btn, btnSync }
  }
}
</script>

<style>

</style>
